<!-- 学分任务 组件 -->

<template>
	<!-- 组件大块 -->
	<view class="tabbar-study-task-comp-shell">

		<!-- 背景图片容器 -->
		<view class="tabbar-study-task-bg-block">
			<!-- 管理人员 -->
			<image v-if="person ==1 || 3" class="tabbar-study-task-img-bg" src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/24/bg_admin_20250624092630A043.png"></image>
			<!-- 作业人员 -->
			<!-- <image v-else class="tabbar-study-task-img-bg" src="/static/img/home/bg_work.png"></image> -->
		</view>

		<!-- 学分统计信息容器 -->
		<view class="tabbar-study-task-bg-block">

			<view>
				<view style="height: 26rpx;"></view>
				<view
					style="display: flex;align-items: center;justify-content: space-between;width: 750rpx;color:#fff;box-sizing: border-box;padding: 0 30rpx;">
					<view style="display: flex;align-items: center;font-size: 28rpx;flex: 1;text-align:left;">
						<image style="height: 64rpx;width: 64rpx;margin-right: 16rpx;"
							:src="src[userInfo.sentryPid - 1] || src[5]" />
						{{userInfo.person}}
					</view>
					<view style="color: white;font-size: 28rpx;font-weight: 500;flex: 1;text-align: center;">
						{{[1,2,6].includes(Number(person)) ? '本月' : '今年'}}</view>
					<view @click='jumpColletiveStudy' style="display: flex;justify-content: flex-end;flex: 1;">
						<view style="font-size: 28rpx;">集体学习</view> <u-icon name="arrow-right" color="#FFFFFF" />
					</view>
				</view>
			</view>

			<!-- 任务学分数值块 -->
			<focus-box mode="row" width="750" align="center" justify="center">
				<!-- 必修学分 -->
				<focus-box mode="col" width="200" align="center" justify="center">
					<focus-text size="36" color="white"
						:text="statistics.scoreGet_bi + '/' + statistics.scoreTotal_bi"></focus-text>
					<focus-text size="28" color="white" text="必修学时" :styles="{'opacity':0.8}"></focus-text>
				</focus-box>

				<!-- 完成率容器 -->
				<focus-box mode="col" width="270" height="270" align="center" justify="center" position="relative">
					<!-- 背景图片 -->
					<focus-box top="0" left="0" width="270" height="270" position="absolute">
						<!-- 管理人员图片 -->
						<image v-if="person==1 || 3" style="width:270rpx; height:270rpx;"
							src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/24/complete_admin_20250624092635A044.png"></image>
						<!-- 作业人员图片 -->
						<image v-else style="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/24/complete_work_20250624092637A045.png" />
					</focus-box>
					<!-- 进度文字容器 -->
					<focus-box top="0" left="0" mode="col" width="270" height="270" align="center" justify="center"
						position="absolute">
						<!-- 百分比 -->
						<focus-text size="42" weight="bold" :color="person==1 || 3 ? 'primary' : '#FC8444'"
							:text="statistics.progress"></focus-text>
						<!-- 完成率 -->
						<focus-text size="28" text="完成率" :color="person==1 || 3 ? 'primary' : '#FC8444'"></focus-text>
					</focus-box>
				</focus-box>

				<!-- 选修学分 -->
				<focus-box mode="col" width="200" align="center" justify="center">
					<focus-text size="36" color="white"
						:text="statistics.scoreGet_xuan + '/' + statistics.scoreTotal_xuan"></focus-text>
					<focus-text size="28" color="white" text="选修学时" :styles="{'opacity':0.8}"></focus-text>
				</focus-box>

			</focus-box>

			<!-- 记录按钮区域 -->
			<focus-box mode="row" width="750" align="center" justify="center" :padding="[0,0,25,0]">
				<focus-box mode="row" radius="28" height="56" align="center" justify="center" bg="rgba(255,255,255,0.2)"
					:padding="[0,32]" @click="studyBtnClick">
					<focus-text size="24" color="white" text="我的课程"></focus-text>
					<focus-box width="12" height="12"></focus-box>
					<focus-icon size="20" color="white" name="fi-right"></focus-icon>
				</focus-box>

				<!-- 按钮间的间距 -->
				<focus-box width="48" height="10"></focus-box>

				<!-- 学分记录按钮 -->
				<focus-box mode="row" height="56" radius="28" align="center" justify="center" bg="rgba(255,255,255,0.2)"
					:padding="[0,32]" @click="historyBtnClick">
					<focus-text size="24" color="white" text="我的学时"></focus-text>
					<focus-box width="12" height="12"></focus-box>
					<focus-icon size="20" color="white" name="fi-right"></focus-icon>
				</focus-box>


				<!-- 按钮间的间距 -->
				<view v-if="person===5 || person===3">
					<focus-box width="48" height="10" />
				</view>
				<!-- v-if="person===5 || person===3" -->
				<view v-if="person===5 || person===3">
					<focus-box mode="row" height="56" radius="28" align="center" justify="center"
						bg="rgba(255,255,255,0.2)" :padding="[0,32]" @click="doTest">
						<focus-text size="24" color="white" text="在线测评"></focus-text>
						<focus-box width="12" height="12"></focus-box>
						<focus-icon size="20" color="white" name="fi-right"></focus-icon>
					</focus-box>
				</view>
			</focus-box>

		</view>
	</view>
</template>


<script>
	// 接口请求文件引入
	import request from '@/common/js/request/userInfo.js';

	/**
	 * 学分任务组件
	 * @description 学分任务组件，杜先生开发
	 * @property {String} tag 组件标识，默认：task-score
	 * @property {String,Number} person = [1|2] 身份类型，默认：2
	 *   @value 1 管理人员
	 *   @value 2 作业人员，默认
	 *   @value 3 监督人员
	 * @property {String} random 随机字符串
	 * @event {Function()} finished 接口请求执行完毕
	 * @event {Function()} logintouch 登录事务触发
	 */
	export default {
		name: 'task-score',
		props: {
			tag: {
				type: String,
				default: 'task-score'
			},
			person: {
				type: [String, Number],
				default: 2
			},
			bool: {
				type: Boolean,
				required: true
			}, //触发刷新数据
		},

		// 页面数据
		data() {
			return {
				src: [
					"https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/person_admin_20250621075838A247.png",
					"https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/person_work_20250621075920A248.png",
					"https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/person_supervise_20250621080010A249.png",
					"https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/person_executor_20250621080036A250.png",
					"https://jjboss.oss-cn-hangzhou.aliyuncs.com/mech/20220921/1211dc93ff41adb8f288b6ed90a2a104.png",
					'https://jjboss.oss-cn-hangzhou.aliyuncs.com/aqattach/20221025/3f8ef8c749dcb102deda261c2af6034c.png'
				],
				userInfo: {},
				// 系统信息
				sys: {},
				// 统计数据信息
				statistics: {
					progress: "0%",
					scoreGet_bi: "0",
					scoreGet_xuan: "0",
					scoreTotal_bi: 0,
					scoreTotal_xuan: 0,
				},
			}
		},

		created() {},
		// 实例挂载完毕
		mounted() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD) => {
				this.sys = sysD;
			});
		},


		watch: {
			bool: {
				handler(newV, oldV) {
					this.userInfo = uni.getStorageSync('eduInfo')
					this.thingsWillGoReq();
					this.scoreForStudyReq()
				},
				immediate: true,
			}
		},
		// 页面事件
		methods: {
			thingsWillGoReq() {
				request.thingsWillGo({
					fail: () => {
						this.$emit('finished', {
							"tag": this.tag
						});
					},
					success: (res) => {
						this.things = res.info;
						this.$emit('finished', {
							"tag": this.tag
						});
					},
				});
			},
			jumpColletiveStudy() {
				uni.navigateTo({
					url: '/pagesB/pages/colletiveStudy/index'
				})
			},
			//在线测评
			doTest() {
				uni.navigateTo({
					url: `/pagesB/pages/newTestIntroduce/index?scoreGet_bi=${Number(this.statistics.scoreGet_bi)}&scoreGet_xuan=${Number(this.statistics.scoreGet_xuan)}`
				})
			},
			studyBtnClick() {
				uni.navigateTo({
					url: "/pagesB/pages/course/list/index"
				})
			},

			// 学分记录按钮 点击
			historyBtnClick() {
				uni.navigateTo({
					url: "/pagesB/pages/learning/history/index"
				})
			},
			// ============================================= 接口请求
			// 获取用户学分统计
			scoreForStudyReq() {
				request.scoreForStudy({
					fail: () => {
						// 请求执行完毕
						this.$emit('finished', {
							"tag": this.tag
						});
					},
					success: (res) => {
						// 课程信息列表 赋值
						this.statistics = res.info;
						// 请求执行完毕
						this.$emit('finished', {
							"tag": this.tag
						});
					},
				});
			},

		},

	}
</script>


<style>
	/* 外层组件块 */
	.tabbar-study-task-comp-shell {
		width: 750rpx;
		height: 594rpx;
		/* padding-bottom: 108rpx; */
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	/* 绝对定位容器 */
	.tabbar-study-task-bg-block {
		width: 750rpx;
		height: 514rpx;
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	/* 背景图片尺寸 */
	.tabbar-study-task-img-bg {
		width: 750rpx;
		height: 680rpx;
	}
</style>